<template>
    
    <!-- 组件的模板 -->
    <div class="myphonenum">
        <div class="phone">
            <div class="img"><img src="../../static/imgs/phone_num.png" alt="" width='62'></div>
            <p class="text">你的手机号：{{mobile}}</p>
        </div>
        <div class="change_phone">
            <a href="javascript:;" class="weui-btn weui-btn_primary" style="border-radius:4px;" @click="changePhoneFn">更换手机号</a>
        </div>
        <p class="tip">更换后，登录手机号和个人信息中的手机号均改变</p>
    </div>
        
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                mobile: '',
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                this.mobile = util.getUrddataString('mobile')
                
                
                
            },
            changePhoneFn(){
                location.href = "dmsaas://ChangeMyPhoneNum?urdData=" + encodeURIComponent(`mobile=${this.mobile}`) 
            }
        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style scope>
    .phone{
        padding-top: 48px;
    }
    .phone .img{
        width:62px;
        margin: 0 auto 26px;
    }
    .phone .text{
        text-align: center;
        line-height: 22px;
        margin-bottom: 40px;
        color: rgb(51, 51, 51);
        font-size: 16px;
    }
    .change_phone{
        padding: 0 24px;
        margin-bottom: 20px;
    }
    .tip{
        line-height: 22px;
        color: rgb(153, 153, 153);
        text-align: center;
        font-size: 12px;
    }
</style>


